<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		body {
			background-size: cover;
			background-image: url(./images/back.jpg);
			background-repeat: no-repeat;
			/* text-align: center; */
		}

		body .title {
			margin-top: 180px;
			font-size: 51px;
			color: #f3f3f3;
			text-align: center;
		}
		body .Login_form {
			width: 802px;
			height: 439px;
			margin: 80px auto;
			/* border: 1px solid red; */
			box-shadow: 0px 2px 2px;
			border-radius: 5px;
            /* 之所以子盒子不能显示除圆角则是因为溢出被覆盖了 */
            overflow: hidden;
		}
		.Login_form .tip {
			width: 45%;
			height: 100%;
			float: left;
			/* border: 1px solid pink; */
			background: url(./images/logo.png) no-repeat;
			background-position: 50% 40px;
			background-color: #e06965;
			/* border-radius: 5px 0px 0px 5px; */
		}

		.Login_form .hello {
			margin-top: 155px;
			font-size: 18px;
			text-align: center;
		}

		.tip > .text {
			color: #fff8fe;
		}

		.tip > ul {
			margin-top: 100px;
			margin-left: 20px;
			font-size: 9px;
			/* 无序列表属性取值做到空心圆 */
			list-style-type: none;
		}
		ul > li {
			margin-bottom: 25px;
		}

		/* 问题：原点除了变大外，真不太好加粗，所以自己直接弄个圆就好了 */
		/* ul > li::marker {
			font-size: 25px;
		} */
        .tip ul li::before{
            content: '';
            width:10px;
            height:10px;
            border: 2px solid #fff;
            float: left;
            border-radius: 50%;
        }

		.Login_form .login {
			width: 55%;
			height: 100%;
			float: left;
			/* border-radius: 0px 10px 10px 0px; */
			background-color: #fff;
		}

        .login .method{
            margin-left: 42px;
            margin-top: 38px;
            font-size: 15px;
        }

        .login .c_login{
            color: #e65455;
            float:left;
        }

        .login .c_reg{
            color: #dedede;
            float:left;
        }

        .login>input{
            border-left: 0px;
            border-right: 0px;
            border-top: 0px;
            border-bottom: 2px solid #cecfd3;
            background-repeat: no-repeat;
            background-position: 98%;
            margin-bottom: 22px;
            margin-left: 40px;
            width:80%;
            height: 35px;
            outline: none;
        }

        .login .username{
            background-image: url(./images/user.png);
        }

        .login .password{
            background-image: url(./images/lock.png);
        }

        .login .email{
            background-image: url(./images/email.png);
        }

        .login>input::-webkit-input-placeholder{
            color:#e6e9ee;
        }

        .login>input:nth-child(2){
            margin-top: 60px;
        }

        .login button{
            width:75px;
            height:36px;
            margin-left: 40px;
            margin-top:50px;
            border-radius: 30px;
            border :2px solid #ef6d6b;
            color:#ef6d6b;
            background-color: #fff;
        }
	</style>
	<body>
		<div class="title">Hello! Welcome</div>
		<div class="Login_form">
			<div class="tip">
				<div class="text hello">welcome</div>
				<ul class="text">
					<li>&nbsp Simply create your calendar</li>
					<li>&nbsp Add content for each days</li>
					<li>&nbsp Share it to the world (become a rockstar)</li>
				</ul>
			</div>
			<div class="login">
                <div class="method">
                    <div class="c_login">
                        Login
                    </div>
                    <div class="c_reg">
                        /Register
                    </div>
                </div>
                <input placeholder="Your Name" type="text" class="username"></input>
                <input placeholder="Email" type="text" class="email"></input>
                <input placeholder="Password" type="text" class="password"></input>
                <button>LOGIN</button>
            </div>
		</div>
	</body>
</html>
